<template>
  <div>
    <el-container>
      <el-header>
        <!-- 导航栏hahaha -->

        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <!-- 一级菜单 -->
          <el-menu-item
            @click="clickMenu(item)"
            v-for="item in noChildren"
            :index="item.path + ''"
            :key="item.path"
            >{{ item.label }}</el-menu-item
          >

          <!-- 二级菜单 -->
          <el-submenu
            v-for="item in hasChildren"
            :index="item.path + ''"
            :key="item.path"
          >
            <template slot="title">
              <span slot="title">{{ item.label }}</span>
            </template>

            <el-menu-item-group
              v-for="(subItem, subIndex) in item.children"
              :key="subItem.path"
            >
              <el-menu-item :index="subIndex + ''" @click="clickMenu(subItem)">
                {{ subItem.label }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!-- 这里搞一个动态文字 -->
          <div
            ref="TextBox"
            id="myChartText"
            :style="{ width: '500px', height: '40px' }"
          ></div>

          <div class="userImg">
            <el-dropdown trigger="click">
              <img :src="this.$store.state.imgurl" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span @click="modifyInfo()"> 修改信息 </span>
                </el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="welcomeTitle">
            <p>欢迎您，{{ this.$store.state.username }}</p>
          </div>

          <!-- 花朵容器 -->
          <div class="flowerBox">
            <!-- 花朵 -->
            <div class="flower">
              <!-- 花瓣 -->
              <div class="petal" style="--x: 0"></div>
              <div class="petal" style="--x: 1"></div>
              <div class="petal" style="--x: 2"></div>
              <div class="petal" style="--x: 3"></div>
              <div class="petal" style="--x: 4"></div>
              <div class="petal" style="--x: 5"></div>
              <!-- 花心 -->
              <div class="circle"></div>
            </div>
          </div>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <!-- 这是底部,暂时没想好 可以做一个关联链接形式 -->
      </el-footer>
    </el-container>
    <el-drawer title="修改信息" :visible.sync="drawer" :direction="direction">
      <!-- action 服务端 -->
      <!-- action="http://localhost:3007/api/upload" -->
      <!-- :data=this.avatarForm
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload" -->
      <div class="modifyInfoContainer">
        <el-upload
          class="avatar-uploader"
          action="http://localhost/upload"
          :auto-upload="false"
          :show-file-list="false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// import * as echarts from 'echarts';
export default {
  data() {
    return {
      activeIndex: "/",
      // imgsrc: this.$store.state.imgurl,
      menu: [
        {
          path: "/",
          name: "Home",
          label: "首页",
          // url: 'Home/Home'
        },
        {
          path: "/blogmanager",
          name: "blogmanager",
          label: "博客管理",
          // url: 'BlogManager/BlogManager'
        },
        {
          path: "/publishblog",
          name: "publishblog",
          label: "发布博客",
          // url: 'PublishBlog/PublishBlog'
        },
        {
          path: "/weather",
          name: "weather",
          label: "天气预报",
          // url: 'Weather/Weather'
        },
        {
          path: "/userinfo",
          name: "userinfo",
          label: "个人中心",
          // url: 'UserInfo/UserInfo'
        },
        {
          path: "/Product",
          name: "Product",
          label: "二级菜单",

          children: [
            {
              path: "/firstMenu",
              name: "firstMenu",
              label: "vuex测试",
              url: "firstMenu/firstMenu",
            },
            {
              path: "/secondMenu",
              name: "secondMenu",
              label: "第二个菜单",
              url: "secondMenu/secondMenu",
            },
          ],
        },
      ],
      isSelect: "",
      drawer: false,
      direction: "rtl",
      imageUrl: "",
    };
  },
  methods: {
    clickMenu(item) {
      console.log(item);
      this.$router.push({
        name: item.name,
      });
    },
    modifyInfo() {
      this.drawer = true;
    },
    drawDynamicText() {
      // 基于准备好的dom，初始化echarts实例
      const myDynamicText = this.$echarts.init(document.getElementById("myChartText"));
      myDynamicText.setOption({
        graphic: {
          elements: [
            {
              type: "text",
              left: "center",
              top: "center",
              style: {
                text: "welcome to my blog",
                fontSize: 40,
                fontWeight: "bold",
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: "transparent",
                stroke: "#fff",
                lineWidth: 1,
              },
              keyframeAnimation: {
                duration: 3500,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: "transparent",
                      lineDashOffset: 200,
                      lineDash: [200, 0],
                    },
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: "transparent",
                    },
                  },
                  {
                    percent: 1,
                    style: {
                      fill: "white",
                    },
                  },
                ],
              },
            },
          ],
        },
      });
    },
  },
  mounted() {
    //echarts 可视化绘图
    this.drawDynamicText();
  },
  computed: {
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
}
.el-header {
  background-color: #545c64;
}
.welcomeTitle {
  display: flex;
  align-items: center;
  // align-content: center;
  // background-color: #8c939d;
  // justify-content: center;
  width: 100px;
  height: 60px;
  color: #fff;
  float: right;
}
.el-main {
  //  background-color:rgb(192,192,192)
}
.el-footer {
}
.userImg {
  // width:60px;
  height: 60px;
  // background-color:red;
  float: right;
  margin: auto 0;
}
.userImg img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin: 0 20px;
}
.modifyInfoContainer {
  display: flex;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

//  一朵会旋转的花
// 使用flex布局 让内容垂直和水平居中换行显示
.flowerBox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 100px;
  // background: #8c939d;
  float: right;

  // min-height: 50px;
}
// 花朵
.flower {
  position: relative;
  width: 20px;
  height: 20px;
  transform-origin: 100% 100%;
  animation: rotate 3s linear infinite;
}
// 花瓣
.petal {
  display: block;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 0 17px;
  position: absolute;
  // 让不同的花瓣旋转为花朵
  transform-origin: 100% 100%;
  transform: rotate(calc(var(--x) * 60deg));
}
// 花心
.circle {
  width: 25px;
  height: 25px;
  position: absolute;
  background: #fff200;
  border-radius: 50%;
  left: 7px;
  top: 7px;
  box-shadow: 0 0 12px yellow;
  background-image: radial-gradient(at 20% 30%, #fffa65, #f1c40f, #f1dc4b);
}
//花朵旋转动画
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
//动态文字
#myChartText {
  display: flex;
  float: left;
  // background: red;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
</style>
